<template>
	<div>
		<!-- <el-upload class="upload-demo" action="/api/edit/createEdit" :on-change="handleChange"
		 :show-file-list="false" :on-success="imgSuccess" :before-upload="beforeImgUpload">
		</el-upload> -->
		<!-- <el-upload class="upload-demo" action="/api/imgList/createImg" :on-preview="handlePreview" :on-remove="handleRemove"
		 :before-remove="beforeRemove" :on-success="handleSuccess" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload> -->
		<el-upload
            class="avatar-uploader"
            action="/api/imgList/createImg"
            :on-success="uploadSuccess"
            :on-error="uploadError"
			:on-change="handleFileUploaderChange"
            :before-upload="beforeUpload">
		</el-upload>
		<el-form :model="ruleForm"  status-icon rel="ruleForm">
			<el-form-item>
				<el-col v-loading="quillUpdateImg">
					<quill-editor v-model.trim="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
					 @change="onEditorChange($event)">
					</quill-editor>
				</el-col>
			</el-form-item>
			<el-form-item>
				 <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
			</el-form-item>
		</el-form>
		<!-- <div class="edit_container">
			<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
			 @change="onEditorChange($event)">
			</quill-editor>
			<button v-on:click="saveHtml">保存</button>
		</div> -->
	</div>

</template>
<script>
	export default {
		name: 'App',
		data() {
			var container =[
				  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
				  ['blockquote', 'code-block'],

				  [{'header': 1}, {'header': 2}],               // custom button values
				  [{'list': 'ordered'}, {'list': 'bullet'}],
				  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
				  [{'direction': 'rtl'}],                         // text direction

				  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
				  [{'header': [1, 2, 3, 4, 5, 6, false]}],

				  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
				  [{'font': []}],
				  [{'align': []}],
				  ['link', 'image'],
				  ['clean']                                         // remove formatting button
			  ]
			return {
				content: `<p>hello world</p>`,
				imgBase64Array:[],   
				str: '',
				img: [],
				rules: {},
				ruleForm:{},
				quillUpdateImg:false,
				editorOption: {
					modules:{
						
						toolbar: {
							container: container,
							handlers: {
								'image': function(value){
									console.log(value)
									let params = {
										imgUrl: this.imgBase64Array
									}
									if(value){
										document.querySelector('.avatar-uploader input').click(function(){
												this.$ajax.post('/api/imgList/createImg',params).then((res) => {
													console.log(res)
												})
										})
									}else{
										this.quill.format('image',false)
									}
								}
							}
							
						}
					}
				},
			}
		},
		
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			},
		},
		methods: {
			submitForm(formName) {
				console.log(this.ruleForm);
				// this.$refs[formName].validate((valid) => {
				//   if (valid) {
				// 	console.log(this.ruleForm);
				//   } else {
				// 	console.log('error submit!!');
				// 	return false;
				//   }
				// });
			 },
			beforeUpload() {
				// 显示loading动画
				this.quillUpdateImg = true
			},
			uploadSuccess(response, file, fileList){
				console.log(file)
				// 获取富文本组件实例
				let quill = this.$refs.myQuillEditor.quill
				 // 如果上传成功
				if (response.code == 1) {
					// 获取光标所在位置
					let length = quill.getSelection().index;
					// 插入图片  res.info为服务器返回的图片地址
					quill.insertEmbed(length, 'image', file.url)
					// 调整光标到最后
					quill.setSelection(length + 1)
				} else {
					this.$message.error('图片插入失败')
				}
				// loading动画消失
				this.quillUpdateImg = false
			},
			uploadError() {
				// loading动画消失
				this.quillUpdateImg = false
				this.$message.error('图片上传失败')
			},
			handleFileUploaderChange(file){
				const that = this
				let reader = new FileReader(file.raw)
				reader.onload = function(event){
					console.log(reader.result)

					let img_base64 = reader.result
					that.imgBase64Array.push(img_base64)
				}
				console.log(that.imgBase64Array)
			},
			onEditorReady(editor) { // 准备编辑器
			},
			onEditorBlur() {}, // 失去焦点事件
			onEditorFocus() {}, // 获得焦点事件
			onEditorChange() {}, // 内容改变事件

			escapeStringHTML(str) {
				str = str.replace(/&lt;/g, '<');
				str = str.replace(/&gt;/g, '>');
				return str;
			},
			// saveHtml: function(event) {
			// 	// alert(this.content);
			// 	console.log(this.content)
			// 	var escapeString = this.escapeStringHTML(this.content)
			// 	console.log(escapeString)
			// 	let params = {
			// 		des: this.content
			// 	}
			// 	this.$ajax.post('/api/edit/createEdit', params).then((res) => {
			// 		console.log(res)
			// 	})
			// },
			// getEdit() {
			// 	this.$ajax.post('/api/edit/getEditList').then((res) => {
			// 		console.log(res.data[0].des)
			// 		this.content = res.data[0].des
			// 		console.log(this.content)
			// 	})
			// }
		},
		mounted() {
			// var escapeString = this.escapeStringHTML(this.content)
			// console.log(escapeString)
			// this.getEdit()
		}
	}
</script>

<style>
	.ql-container {
		height: 500px;
	}
</style>
